<template>
	<div class="UserSet my-app">
		<h2 class="my-h2" v-if="type==='add'">职员信息 / 录入</h2>
		<h2 class="my-h2" v-if="type==='profile'">个人信息 / 修改</h2>
		<h2 class="my-h2" v-if="type==='audit'">职员信息 / 审核</h2>
		<div class="top my-form-item">
			<div class="left">
				<div class="head">
					<el-upload action="" :auto-upload="false" :show-file-list="false" :on-change="coverchange">
						<img width="100%" :src="tableData.head" alt="头像上传">
					</el-upload>
				</div>

				<div class="con-row">
					<div class="row">
						<label>职员名称</label> <input class="input" v-model="tableData.name" />
					</div>
					<div class="row" :class="{pointerevents:type==='profile'}">
						<label>部门名称</label>
						<select class="input" v-model="tableData.department" @click="selectdepartment(tableData.department)">
							<option v-for="(op,key,index) in departmentList" :key="index">{{op.department}}</option>
						</select>
					</div>
					<div class="row">
						<label>登录账号</label> <input class="input" v-model="tableData.account" />
					</div>
					<div class="row">
						<label>性别</label>
						<el-radio v-model="tableData.sex" :label="1">男</el-radio>
						<el-radio v-model="tableData.sex" :label="2">女</el-radio>
					</div>
				</div>
				<div class="con-row">
					<div class="row">
						<label>手机号码 </label> <input class="input" v-model="tableData.phone" />
					</div>
					<div class="row">
						<label>验证码</label>
						<div style="width: 200px;display: flex;justify-content: space-between;">
							<input class="input input-btn" v-model="tableData.code" />
							<div class="input-btn" style="cursor: pointer; font-size: 12px;" :style="{cursor:LabelInput.disabled}" @click="getRedcode">{{LabelInput.buttonText}}</div>
						</div>
					</div>
					<div class="row">
						<label v-if="type!='add'">新密码</label>
						<label v-else>密码</label>
						<input class="input" v-model="tableData.password" type="password" />
					</div>
					<div class="row">
						<label>再次输入密码</label> <input class="input" v-model="tableData.repassword" type="password" />
					</div>
				</div>
			</div>
			<div class="right" v-if="type!='profile'">
				<h3 class="my-h3c">权限状态</h3>
				<div class="list-checkbox">

					<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">最高权限</el-checkbox>
					<div style="margin: 15px 0;"></div>
					<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
						<el-checkbox v-for="(city,key,index) in cities" :label="city.status" :key="index">{{city.label}}</el-checkbox>
					</el-checkbox-group>
					
				</div>
			</div>
		</div>
		<div class="my-button" v-if="type==='audit'">
			<el-button class="button" @click="setCheckUser">通过审核</el-button>
			<el-button class="button" @click="$router.go(-1)">未通过</el-button>
		</div>
		<div class="my-button" v-if="type==='profile'">
			<el-button class="submit" @click="setUpdateUserInfo">修改</el-button>
		</div>
		<div class="my-button" v-if="type==='add'">
			<el-button class="submit" @click="setaddUser">提交</el-button>
		</div>
	</div>
</template>
<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex';
	import upload from '@/assets/img/sys/upload.png';
	export default {
		name: "UserSet",
		data() {
			return {
				type: this.$route.params.type,
				uploadone: upload,
				checkradio: "",
				tableData: {
					head: upload,
					department: "", // string 部门名称
					phone: "", // number 电话
					code: "", // number 验证码
					name: "", // string 用户名
					account: "", // string 登录名
					password: "", // string 密码
					repassword: "", // string 重复密码
					status: [], // Array 权限
				},
				departmentList: [{
					channel_id: 0,
					department: "+新部门",
					id: 0
				}],
				update: {
					token: "", //String header传入
					department: "", //String 部门名称
					status: "", //Number 权限值1系统管理2验票员3财务 允许值: 1, 2, 3
					id: "", //Int 员工ID
				},
				LabelInput: {
					buttonText: "获取验证码",
					disabled: false
				},
				checkAll: false,
				checkedCities: [],
				cities: [{
					status: '2',
					label: '职员管理'
				}, {
					status: '3',
					label: '订单管理'
				}, {
					status: '4',
					label: '产品管理'
				}, {
					status: '5',
					label: '财务管理'
				}, {
					status: '6',
					label: '平台服务'
				}],
				isIndeterminate: true
			}
		},
		created() {
			// 公司 - 商户部门列表
			this.setdepartmentList();
			if (this.type === "profile") {
				this.getres_userrow(this.UserInfo_data)
			}
			if (this.type != 'add') {
				this.tableData = this.res_userrow;
				if (this.tableData.status[0] === '1') {
					this.handleCheckAllChange(true)
					this.checkAll = true;
				} else {
					this.checkedCities = this.tableData.status
				}
			}

		},
		beforeRouteLeave(to, from, next) {
			this.getres_userrow("");
			this.tableData = {},
				next();
		},
		computed: {
			...mapGetters([
				'token',
				'res_userList',
				'UserInfo_data',
				'res_userrow'
			])
		},
		beforeDestroy() {
			this.getres_userList('');
			this.getres_userrow('');
		},
		methods: {
			...mapActions({
				getres_userList: 'getres_userList',
				getres_userrow: 'getres_userrow',
				getpage: 'getpage',
				getUserInfo: 'getUserInfo'
			}),
			// 公司 - 商户部门列表
			setdepartmentList() {
				this.$api.GetdepartmentList({
						token: this.token
					})
					.then(res => {
						for (var i = 0; i < res.result.length; i++) {
							this.departmentList.push(res.result[i]);
						}
					})
			},
			// 获取验证码
			getRedcode() {
				var _this = this;
				_this.$api.GetRedcode({
						phone: _this.tableData.phone
					})
					.then(res => {
						this.$alert(res.meg, '提示', {
							confirmButtonText: '确定',
							callback: action => {
								if (res.code === 200) {
									var n = 59
									var setter = setInterval(function() {
										_this.LabelInput.buttonText = n;
										_this.LabelInput.disabled = 'not-allowed';
										if (n < 1) {
											_this.LabelInput.buttonText = "获取验证码";
											_this.LabelInput.disabled = 'pointer';
										}
										n--;
									}, 1000)
									setTimeout(function() {
										clearInterval(setter)
									}, 61000)
								}
							}
						});
					})
			},
			// 上传头像
			coverchange(file, fileList) {
				var _this = this;
				var windowURL = window.URL || window.webkitURL;
				_this.param = new FormData();
				_this.param.append('images', file.raw, file.name);
				_this.$api.uploadScenicFace(_this.param, function(data) {
					_this.tableData.head = 'https://www.ddmzj.com/' + data.url;
				});
			},
			// 职员录入
			setaddUser() {
				this.tableData['token'] = this.token;
				delete this.tableData['head'];
				this.$api.GetaddUser(this.tableData)
					.then(res => {
						this.$alert(res.meg, '提示', {
							confirmButtonText: '确定',
							callback: action => {
								if (res.code === 200) {
									this.$router.push('/UserMag')
								} else {
									this.tableData.head = upload;
								}
							}
						})
					})

			},
			// 修改个人信息
			setUpdateUserInfo() {
				this.tableData['token'] = this.token;
				this.$api.GetUpdateUserInfo(this.tableData)
					.then(res => {
						this.$alert(res.meg, '提示', {
							confirmButtonText: '确定',
							callback: action => {
								if (res.code === 200) {
									this.UserInfo();
								}
							}
						})
					})
			},
			UserInfo() {
				this.$api.GetUserInfo({
						token: this.token
					})
					.then(res => {
						if (res.code === 200) {
							this.getUserInfo(res.result)
						}
						if (res.code === 310) {
							this.$alert(res.meg, '提示', {
								confirmButtonText: '确定',
								callback: action => {
									this.$router.push("/LoginIndex");
									Cookie.Cookiedel("token")
									this.setToken("");
								}
							})
						}
					})
			},
			// 员工审核
			setCheckUser() {
				this.tableData.token = this.token;
				this.$api.GetCheckUser(this.tableData)
					.then(res => {
						this.$alert(res.meg, '提示', {
							confirmButtonText: '确定',
							callback: action => {
								if (res.code === 200) {
									this.$router.push('/UserMag')
								}
							}
						})
					})
			},
			selectdepartment(val) {
				if (val === "+新部门") {
					this.adddepartment()
				}
			},
			// 添加新部门
			adddepartment() {
				this.$prompt('请输入部门名称', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(({
					value
				}) => {
					this.tableData.department = value;
					this.$api.GetaddDepartment({
							department: this.tableData.department
						}, this.token)
						.then(res => {
							this.$alert(res.meg, '提示', {
								confirmButtonText: '确定',
								callback: action => {
									if (res.code === 200) {
										this.departmentList = [{
												channel_id: 0,
												department: "+新部门",
												id: 0
											}],
											this.setdepartmentList()
									}
								}
							})
						})
				}).catch(() => {
					this.$alert('取消添加', '提示', {
						confirmButtonText: '确定',
						callback: action => {
							this.tableData.department = "";
						}
					})
				});
			},
			handleCheckAllChange(val) {
				this.checkedCities = val ? ['1', '2', '3', '4', '5', '6', ] : [];
				this.isIndeterminate = false;
				this.tableData.status = ['1'];
			},
			handleCheckedCitiesChange(value) {
				this.checkedCities = value;
				this.tableData.status = value;
				let checkedCount = value.length;
				// this.checkAll = checkedCount === this.cities.length;
				this.checkAll = false;
				this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
			}

		},

		watch: {
			'$route'(to, from) {
				this.type = to.params.type;
				if (this.type === 'profile') {
					this.getres_userrow(this.UserInfo_data)
					this.tableData = this.res_userrow;
				}
				// 公司 - 商户部门列表
				this.setdepartmentList
				if (this.type != 'add') {
					this.uploadone = this.res_userrow.head
					if (this.tableData.status[0] === '1') {
						this.handleCheckAllChange(true)
						this.checkAll = true;
					} else {
						this.checkedCities = this.tableData.status
					}
				}

				if (this.type === 'add') {
					this.getres_userrow("")
					this.tableData = {};
					this.tableData.head = upload;
					this.checkAll = false;
					this.checkedCities = [];
				}
			},
			type(newValue, oldValue) {}
		}
	}
</script>

<style scoped lang="less">
	.UserSet {
		text-align: left;

		.top {
			width: 100%;

			.left {
				width: 100%;
				display: flex;

				.head {
					width: 120px;
					height: 120px;

					img {

						width: 120px;
						height: 120px;
					}
				}

				.con-row {
					width: 350px;
					padding: 0 15px;
					box-sizing: border-box;

					.row {
						display: flex;
						text-align: left;
						padding: 10px 0;

						label {
							width: 120px;
							text-align: right;
							padding-right: 10px;
							box-sizing: border-box;
						}

						.input-btn {
							// margin: 0 6px;
							width: 90px;
							height: 20px;
							line-height: 20px;
							border: 1px solid #41c7db;
							padding-left: 10px;
							box-sizing: border-box;
							text-align: center;
							padding: 0;
						}
					}

					.input {
						width: 200px;
						height: 20px;
						border: 1px solid #41c7db;
						padding-left: 10px;
						box-sizing: border-box;
					}
				}
			}

			.right {
				margin: 15px 0;

				.list-checkbox {
					width: 100%;
					padding: 15px 0;
					box-sizing: border-box;
				}


			}
		}

	}
</style>
